<!DOCTYPE html>
<head>
    <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="You can format tables using either multimarkdown syntax or HTML. You can also use jQuery datatables (a plugin) if you need more robust tables.">
<meta name="keywords" content="formatting,  datatables, tables, grids, markdown, multimarkdown, jquery plugins">
<title>Tables | 常见故障解决方案</title>
<link rel="stylesheet" href="css/syntax.css">


<link rel="stylesheet" type="text/css" href="css/font-awesome.min-4.5.0.css">
<!--<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">-->
<link rel="stylesheet" href="css/modern-business.css">
<link rel="stylesheet" href="css/lavish-bootstrap.css">
<link rel="stylesheet" href="css/customstyles.css">
<link rel="stylesheet" href="css/theme-blue.css">


<script type="text/javascript" charset="utf8" src="js/jquery.js"></script>
<script src="js/jquery.cookie.min.js"></script>
<script src="js/jquery.navgoco.min.js"></script>


<script src="js/bootstrap.min.js"></script>
<script src="js/anchor.min.js"></script>
<script src="js/toc.js"></script>
<script src="js/customscripts.js"></script>

<link rel="shortcut icon" href="images/favicon.ico">

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://cdn.bootcss.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

<link rel="alternate" type="application/rss+xml" title="" href="feed.xml">

    <script>
        $(document).ready(function() {
            // Initialize navgoco with default options
            $("#mysidebar").navgoco({
                caretHtml: '',
                accordion: true,
                openClass: 'active', // open
                save: false, // leave false or nav highlighting doesn't work right
                cookie: {
                    name: 'navgoco',
                    expires: false,
                    path: '/'
                },
                slide: {
                    duration: 400,
                    easing: 'swing'
                }
            });

            $("#collapseAll").click(function(e) {
                e.preventDefault();
                $("#mysidebar").navgoco('toggle', false);
            });

            $("#expandAll").click(function(e) {
                e.preventDefault();
                $("#mysidebar").navgoco('toggle', true);
            });

        });

    </script>
    <script>
        $(function () {
            $('[data-toggle="tooltip"]').tooltip()
        })
    </script>

    
    <!-- serach box css -->
    <style>
        .dataTables_filter {
         display: none;
        }
        .dataTables_length {
          display: none;
        }
        div.ref_search div.ref_field div.ref_input input {
            padding: 0.5em;
            border-radius: 0.5em;
            width: 85%;
        }
        div.ref_search div.ref_field div.ref_input {
             display: table-cell;
             text-align: left;
         }
        div.ref_search div.ref_field {
            display: table-row;
        }
        div.ref_search div.ref_field div.ref_label {
            display: table-cell;
            text-align: right;
            width: 12%;
        }
        div.ref_search {
            display: table;
            border-spacing: 0.75em;
            width: 90%;
            padding: 0.5em 0;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-shadow: 2px 2px 2px #bbb;
            text-align: center;
            margin: 1em 0;
            margin-left: auto;
            margin-right: auto;
            background: #ffffff;
            background: -webkit-linear-gradient(top, #fff 0%, #f3f3f3 89%, #f9f9f9 100%);
            background: -moz-linear-gradient(top, #fff 0%, #f3f3f3 89%, #f9f9f9 100%);
            background: -ms-linear-gradient(top, #fff 0%, #f3f3f3 89%, #f9f9f9 100%);
            background: -o-linear-gradient(top, #fff 0%, #f3f3f3 89%, #f9f9f9 100%);
            background: linear-gradient(top, #fff 0%, #f3f3f3 89%, #f9f9f9 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f9f9f9',GradientType=0 );
        }
    </style>
      <!-- DataTables CSS -->
    <link rel="stylesheet" type="text/css" href="DataTables-1.10.12/media/css/jquery.dataTables.css">
      <!-- DataTables -->
    <script type="text/javascript" charset="utf8" src="DataTables-1.10.12/media/js/jquery.dataTables.js"></script>
    <script>
        $(document).ready(function() {
            var dataTable = $('#searchTable').dataTable();
            $("#searchbox").keyup(function() {
                dataTable.fnFilter(this.value);
            });
        });
    </script>
    

</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container topnavlinks">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="fa fa-home fa-lg navbar-brand" href="index.html">&nbsp;<span class="projectTitle"> 常见故障解决方案</span></a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <!-- entries without drop-downs appear here -->
                
                
                
                <li><a href="index.html">重新搜索</a></li>
                
                
                
                <!-- entries with drop-downs appear here -->
                <!-- conditional logic to control which topnav appears for the audience defined in the configuration file.-->
                
                
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">其他文档入口<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        
                        
                        <li><a href="index.html">常见故障解决方案</a></li>
                        
                        
                        
                        <li><a href="p1_sample1.html">常用语法</a></li>
                        
                        
                    </ul>
                </li>
                
                
                
			<li><a class="email" title="问题反馈" href="#" onclick="javascript:window.location='mailto:Merlin_Wu@apllogistics.com?subject=《常见故障解决方案》反馈&body=%0D____________________________________________________________________%0D问题页面：%09Tables %0D问题地址：%09' + window.location.href;"><i class="fa fa-envelope-o"></i> 邮件反馈</a><li>

		
                <!--comment out this block if you want to hide search-->
                <li>
                    <!--start search-->
                    <!-- <div id="search-demo-container">
                        <input type="text" id="search-input" placeholder="search...">
                        <ul id="results-container"></ul>
                    </div>
                    <script src="js/jekyll-search.js" type="text/javascript"></script>
                    <script type="text/javascript">
                            SimpleJekyllSearch.init({
                                searchInput: document.getElementById('search-input'),
                                resultsContainer: document.getElementById('results-container'),
                                dataSource: 'search.json',
                                searchResultTemplate: '<li><a href="{url}" title="Tables">{title}</a></li>',
                    noResultsText: 'No results found.',
                            limit: 10,
                            fuzzy: true,
                    })
                    </script> -->
                    <!--end search-->
                </li>
            </ul>
        </div>
        </div>
        <!-- /.container -->
</nav>

<!-- Page Content -->
<div class="container">
    <div class="col-lg-12">&nbsp;</div>
    <!-- Content Row -->
    <div class="row">
        <!-- Sidebar Column -->
        <div class="col-md-3">

          












<!--  -->


<ul id="mysidebar" class="nav">
    <li class="sidebarTitle">目录 </li>
    
    
    
        
    
    <li>
        <a href="#">常用操作</a>
        <ul>
            
            
            
            <li><a href="index.html">搜索</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_introduction.html">Introduction</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_supported_features.html">Supported features</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_about.html">About the theme author</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_support.html">Support</a></li>
            
            
            
            
        </ul>
        
        
    
    <li>
        <a href="#">Release Notes</a>
        <ul>
            
            
            
            <li><a href="mydoc_release_notes_60.html">6.0 Release notes</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_release_notes_50.html">5.0 Release notes</a></li>
            
            
            
            
        </ul>
        
        
    
    <li>
        <a href="#">Installation</a>
        <ul>
            
            
            
            <li><a href="mydoc_about_ruby_gems_etc.html">About Ruby, Gems, Bundler, etc.</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_install_jekyll_on_mac.html">Install Jekyll on Mac</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_install_jekyll_on_windows.html">Install Jekyll on Windows</a></li>
            
            
            
            
        </ul>
        
        
    
    <li>
        <a href="#">Authoring</a>
        <ul>
            
            
            
            <li><a href="mydoc_pages.html">Pages</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_posts.html">Posts</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_lists.html">Lists</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_conditional_logic.html">Conditional logic</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_content_reuse.html">Content reuse</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_collections.html">Collections</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_webstorm_text_editor.html">WebStorm editor tips</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_atom_text_editor.html">Atom editor tips</a></li>
            
            
            
            
        </ul>
        
        
    
    <li>
        <a href="#">Navigation</a>
        <ul>
            
            
            
            <li><a href="mydoc_sidebar_navigation.html">Sidebar navigation</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_yaml_tutorial.html">YAML tutorial in the context of Jekyll</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_tags.html">Tags</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_series.html">Series</a></li>
            
            
            
            
        </ul>
        
        
    
    <li>
        <a href="#">Formatting</a>
        <ul>
            
            
            
            <li><a href="mydoc_adding_tooltips.html">Tooltips</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_alerts.html">Alerts</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_icons.html">Icons</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_images.html">Images</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_code_samples.html">Code samples</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_labels.html">Labels</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_hyperlinks.html">Links</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_navtabs.html">Navtabs</a></li>
            
            
            
            
            
            
            <li class="active"><a href="mydoc_tables.html">Tables</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_syntax_highlighting.html">Syntax highlighting</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_workflow_maps.html">Workflow maps</a></li>
            
            
            
            
        </ul>
        
        
    
    <li>
        <a href="#">Handling reviews</a>
        <ul>
            
            
            
            <li><a href="mydoc_commenting_on_files.html">Commenting on files</a></li>
            
            
            
            
        </ul>
        
        
    
    <li>
        <a href="#">Publishing</a>
        <ul>
            
            
            
            <li><a href="mydoc_build_arguments.html">Build arguments</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_themes.html">Themes</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_generating_pdfs.html">Generating PDFs</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_help_api.html">Help APIs and UI tooltips</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_search_configuration.html">Search configuration</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_iterm_profiles.html">iTerm profiles</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_push_build_to_server.html">Pushing builds to server</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_no_password_prompts_scp.html">Getting around the password prompts in SCP</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_publishing_github_pages.html">Publishing on Github Pages</a></li>
            
            
            
            
        </ul>
        
        
    
    <li>
        <a href="#">Special layouts</a>
        <ul>
            
            
            
            <li><a href="mydoc_kb_layout.html">Knowledge-base layout</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_glossary.html">Glossary layout</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_faq_layout.html">FAQ layout</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_scroll.html">Scroll layout</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_shuffle.html">Shuffle layout</a></li>
            
            
            
            
        </ul>
        
        
    
    <li>
        <a href="#">Troubleshooting</a>
        <ul>
            
            
            
            <li><a href="mydoc_troubleshooting.html">Troubleshooting</a></li>
            
            
            
            
        </ul>
        
        
    
    <li>
        <a href="#">Tag archives</a>
        <ul>
            
            
            
            <li><a href="mydoc_tag_archives_overview.html">Tag archives overview</a></li>
            
            
            
            <li class="subfolders">
                <a href="#">Tag archive pages</a>
                <ul>
                    
                    
                    
                    <li><a href="tag_formatting.html">Formatting pages</a></li>
                    
                    
                    
                    
                    
                    <li><a href="tag_navigation.html">Navigation pages</a></li>
                    
                    
                    
                    
                    
                    <li><a href="tag_content_types.html">Content types pages</a></li>
                    
                    
                    
                    
                    
                    <li><a href="tag_publishing.html">Publishing pages</a></li>
                    
                    
                    
                    
                    
                    <li><a href="tag_special_layouts.html">Special layout pages</a></li>
                    
                    
                    
                    
                    
                    <li><a href="tag_collaboration.html">Collaboration pages</a></li>
                    
                    
                    
                    
                    
                    <li><a href="tag_troubleshooting.html">Troubleshooting pages</a></li>
                    
                    
                    
                </ul>
            </li>
            
            
            
            
        </ul>
        
        
        
        <!-- if you aren't using the accordion, uncomment this block:
           <p class="external">
               <a href="#" id="collapseAll">Collapse All</a> | <a href="#" id="expandAll">Expand All</a>
           </p>
           -->
    </li>
</ul>
</div>

<!-- this highlights the active parent class in the navgoco sidebar. this is critical so that the parent expands when you're viewing a page. This must appear below the sidebar code above. Otherwise, if placed inside customscripts.js, the script runs before the sidebar code runs and the class never gets inserted.-->
<script>$("li.active").parents('li').toggleClass("active");</script>

    <!-- Content Column -->
    <div class="col-md-9">
        <div class="post-header">
   <h1 class="post-title-main">Tables</h1>
</div>



<div class="post-content">

   
    <div class="summary">You can format tables using either multimarkdown syntax or HTML. You can also use jQuery datatables (a plugin) if you need more robust tables.</div>
   

    
    
<!-- this handles the automatic toc. use ## for subheads to auto-generate the on-page minitoc. if you use html tags, you must supply an ID for the heading element in order for it to appear in the minitoc. -->
<script>
$( document ).ready(function() {
  // Handler for .ready() called.

$('#toc').toc({ minimumHeaders: 0, listType: 'ul', showSpeed: 0, headers: 'h2,h3,h4' });

/* this offset helps account for the space taken up by the floating toolbar. */
$('#toc').on('click', 'a', function() {
  var target = $(this.getAttribute('href'))
    , scroll_target = target.offset().top

  $(window).scrollTop(scroll_target - 10);
  return false
})
  
});
</script>

<div id="toc"></div>

    

    

    

    

  
<script>
$(document).ready(function(){

    $('table.display').DataTable( {
        paging: true,
        stateSave: true,
        searching: true
    }
        );
});
</script>

<h2 id="multimarkdown-tables">Multimarkdown Tables</h2>

<p>You can use Multimarkdown syntax for tables. The following shows a sample:</p>

<div class="highlighter-rouge"><pre class="highlight"><code>| Priority apples | Second priority | Third priority |
|-------|--------|---------|
| ambrosia | gala | red delicious |
| pink lady | jazz | macintosh |
| honeycrisp | granny smith | fuji |
</code></pre>
</div>

<p><strong>Result:</strong></p>

<table>
  <thead>
    <tr>
      <th>Priority apples</th>
      <th>Second priority</th>
      <th>Third priority</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>ambrosia</td>
      <td>gala</td>
      <td>red delicious</td>
    </tr>
    <tr>
      <td>pink lady</td>
      <td>jazz</td>
      <td>macintosh</td>
    </tr>
    <tr>
      <td>honeycrisp</td>
      <td>granny smith</td>
      <td>fuji</td>
    </tr>
  </tbody>
</table>

<div class="alert alert-info" role="alert"><i class="fa fa-info-circle"></i> <b>Note:</b> You can’t use block level tags (paragraphs or lists) inside Markdown tables, so if you need separate paragraphs inside a cell, use <code class="highlighter-rouge">&lt;br/&gt;&lt;br/&gt;</code>.</div>

<h2 id="htmltables">HTML Tables</h2>

<p>If you need a more sophisticated table syntax, use HTML syntax for the table. Although you’re using HTML, you can use Markdown inside the table cells by adding <code class="highlighter-rouge">markdown="1"</code> as an attribute for the <code class="highlighter-rouge">td</code> tag, as shown in the following table. You can also control the column widths.</p>

<div class="language-html highlighter-rouge"><pre class="highlight"><code><span class="nt">&lt;table&gt;</span>
<span class="nt">&lt;colgroup&gt;</span>
<span class="nt">&lt;col</span> <span class="na">width=</span><span class="s">"30%"</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;col</span> <span class="na">width=</span><span class="s">"70%"</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;/colgroup&gt;</span>
<span class="nt">&lt;thead&gt;</span>
<span class="nt">&lt;tr</span> <span class="na">class=</span><span class="s">"header"</span><span class="nt">&gt;</span>
<span class="nt">&lt;th</span> <span class="na">align=</span><span class="s">"left"</span><span class="nt">&gt;</span>Field<span class="nt">&lt;/th&gt;</span>
<span class="nt">&lt;th</span> <span class="na">align=</span><span class="s">"left"</span><span class="nt">&gt;</span>Description<span class="nt">&lt;/th&gt;</span>
<span class="nt">&lt;/tr&gt;</span>
<span class="nt">&lt;/thead&gt;</span>
<span class="nt">&lt;tbody&gt;</span>
<span class="nt">&lt;tr&gt;</span>
<span class="nt">&lt;td</span> <span class="na">align=</span><span class="s">"left"</span> <span class="na">markdown=</span><span class="s">"1"</span><span class="nt">&gt;</span>First column **fields**<span class="nt">&lt;/td&gt;</span>
<span class="nt">&lt;td</span> <span class="na">align=</span><span class="s">"left"</span> <span class="na">markdown=</span><span class="s">"1"</span><span class="nt">&gt;</span>Some descriptive text. This is a markdown link to [Google](http://google.com). Or see [some link][mydoc_tags].<span class="nt">&lt;/td&gt;</span>
<span class="nt">&lt;/tr&gt;</span>
<span class="nt">&lt;tr&gt;</span>
<span class="nt">&lt;td</span> <span class="na">align=</span><span class="s">"left"</span> <span class="na">markdown=</span><span class="s">"1"</span><span class="nt">&gt;</span>Second column **fields**<span class="nt">&lt;/td&gt;</span>
<span class="nt">&lt;td</span> <span class="na">align=</span><span class="s">"left"</span> <span class="na">markdown=</span><span class="s">"1"</span><span class="nt">&gt;</span>Some more descriptive text. Here we have a Markdown-formatted list:

* first item
* second item
* third item
<span class="nt">&lt;/td&gt;</span>
<span class="nt">&lt;/tr&gt;</span>
<span class="nt">&lt;/tbody&gt;</span>
<span class="nt">&lt;/table&gt;</span>
</code></pre>
</div>
<p><strong>Result:</strong></p>
<table>
<colgroup>
<col width="30%" />
<col width="70%" />
</colgroup>
<thead>
<tr class="header">
<th align="left">Field</th>
<th align="left">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td align="left">
        <p>First column <strong>fields</strong>&lt;/td&gt;</p>
        <td align="left">
          <p>Some descriptive text. This is a markdown link to <a href="http://google.com">Google</a>. Or see <a href="mydoc_tags.html">some link</a>.&lt;/td&gt;
&lt;/tr&gt;</p>
          <tr>
<td align="left">
              <p>Second column <strong>fields</strong>&lt;/td&gt;</p>
              <td align="left">
                <p>Some more descriptive text. Here we have a Markdown-formatted list:</p>

                <ul>
                  <li>first item</li>
                  <li>second item</li>
                  <li>third item</li>
                </ul>
              </td>
              <p>&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;</p>

              <h2 id="jquery-datables">jQuery datables</h2>

              <p>You also have the option of using a <a href="https://www.datatables.net/">jQuery datatable</a>, which gives you some more options. If you want to use a jQuery datatable, then add <code class="highlighter-rouge">datatable: true</code> in a page’s frontmatter. This will load the right jQuery datatable scripts for the table on that page only (rather than loading the scripts on every page of the site.)</p>

              <p>Also, you need to add this script to trigger the jQuery table on your page:</p>

              <div class="language-js highlighter-rouge"><pre class="highlight"><code><span class="o">&lt;</span><span class="nx">script</span><span class="o">&gt;</span>
<span class="nx">$</span><span class="p">(</span><span class="nb">document</span><span class="p">).</span><span class="nx">ready</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span>

    <span class="nx">$</span><span class="p">(</span><span class="s1">'table.display'</span><span class="p">).</span><span class="nx">DataTable</span><span class="p">(</span> <span class="p">{</span>
        <span class="na">paging</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
        <span class="na">stateSave</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
        <span class="na">searching</span><span class="p">:</span> <span class="kc">true</span>
    <span class="p">}</span>
        <span class="p">);</span>
<span class="p">});</span>
<span class="o">&lt;</span><span class="sr">/script</span><span class="err">&gt;
</span></code></pre>
              </div>

              <p>The available options for the datable are described in the <a href="https://www.datatables.net/manual/options">datatable documentation</a>, which is excellent.</p>

              <p>Additionally, you must add a class of <code class="highlighter-rouge">display</code> to your tables. (You can change the class, but then you’ll need to change the trigger above from <code class="highlighter-rouge">table.display</code> to whatever class you want to you. You might have different triggers with different options for different tables.)</p>

              <p>Since Markdown doesn’t allow you to add classes to tables, you’ll need to use HTML for any datatables. Here’s an example:</p>

              <div class="language-html highlighter-rouge"><pre class="highlight"><code><span class="nt">&lt;table</span> <span class="na">id=</span><span class="s">"sampleTable"</span> <span class="na">class=</span><span class="s">"display"</span><span class="nt">&gt;</span>
   <span class="nt">&lt;thead&gt;</span>
      <span class="nt">&lt;tr&gt;</span>
         <span class="nt">&lt;th&gt;</span>Parameter<span class="nt">&lt;/th&gt;</span>
         <span class="nt">&lt;th&gt;</span>Description<span class="nt">&lt;/th&gt;</span>
         <span class="nt">&lt;th&gt;</span>Type<span class="nt">&lt;/th&gt;</span>
         <span class="nt">&lt;th&gt;</span>Default Value<span class="nt">&lt;/th&gt;</span>
      <span class="nt">&lt;/tr&gt;</span>
   <span class="nt">&lt;/thead&gt;</span>
   <span class="nt">&lt;tbody&gt;</span>
      <span class="nt">&lt;tr&gt;</span>
         <span class="nt">&lt;td&gt;</span>Parameter 1<span class="nt">&lt;/td&gt;</span>
         <span class="nt">&lt;td&gt;</span>Sample description
         <span class="nt">&lt;/td&gt;</span>
         <span class="nt">&lt;td&gt;</span>Sample type<span class="nt">&lt;/td&gt;</span>
         <span class="nt">&lt;td&gt;</span>Sample default value<span class="nt">&lt;/td&gt;</span>
      <span class="nt">&lt;/tr&gt;</span>
      <span class="nt">&lt;tr&gt;</span>
         <span class="nt">&lt;td&gt;</span>Parameter 2<span class="nt">&lt;/td&gt;</span>
         <span class="nt">&lt;td&gt;</span>Sample description
         <span class="nt">&lt;/td&gt;</span>
         <span class="nt">&lt;td&gt;</span>Sample type<span class="nt">&lt;/td&gt;</span>
         <span class="nt">&lt;td&gt;</span>Sample default value<span class="nt">&lt;/td&gt;</span>
      <span class="nt">&lt;/tr&gt;</span>
    <span class="nt">&lt;tr&gt;</span>
       <span class="nt">&lt;td&gt;</span>Parameter 3<span class="nt">&lt;/td&gt;</span>
       <span class="nt">&lt;td&gt;</span>Sample description
       <span class="nt">&lt;/td&gt;</span>
       <span class="nt">&lt;td&gt;</span>Sample type<span class="nt">&lt;/td&gt;</span>
       <span class="nt">&lt;td&gt;</span>Sample default value<span class="nt">&lt;/td&gt;</span>
    <span class="nt">&lt;/tr&gt;</span>
      <span class="nt">&lt;tr&gt;</span>
         <span class="nt">&lt;td&gt;</span>Parameter 4<span class="nt">&lt;/td&gt;</span>
         <span class="nt">&lt;td&gt;</span>Sample description
         <span class="nt">&lt;/td&gt;</span>
         <span class="nt">&lt;td&gt;</span>Sample type<span class="nt">&lt;/td&gt;</span>
         <span class="nt">&lt;td&gt;</span>Sample default value<span class="nt">&lt;/td&gt;</span>
      <span class="nt">&lt;/tr&gt;</span>
   <span class="nt">&lt;/tbody&gt;</span>
<span class="nt">&lt;/table&gt;</span>
</code></pre>
              </div>

              <p>This renders to the following:</p>

              <table id="sampleTable" class="display">
   <thead>
      <tr>
         <th>Food</th>
         <th>Description</th>
         <th>Category</th>
         <th>Sample type</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Apples</td>
         <td>A small, somewhat round and often red-colored, crispy fruit grown on trees.
         </td>
         
         <td>Fuji</td>
      </tr>
      <tr>
         <td>Bananas</td>
         <td>A long and curved, often-yellow, sweet and soft fruit that grows in bunches in tropical climates.
         </td>
         
         <td>Snow</td>
      </tr>
      <tr>
         <td>Kiwis</td>
         <td>A small, hairy-skinned sweet fruit with green-colored insides and seeds.
         </td>
         
         <td>Golden</td>
      </tr>
        <tr>
           <td>Oranges</td>
           <td>A spherical, orange-colored sweet fruit commonly grown in Florida and California.
           </td>
           
           <td>Navel</td>
        </tr>
   </tbody>
</table>

              <p>Notice a few features:</p>

              <ul>
                <li>You can keyword search the table. When you type a word, the table filters to match your word.</li>
                <li>You can sort the column order.</li>
                <li>You can page the results so that you show only a certain number of values on the first page and then require users to click next to see more entries.</li>
              </ul>

              <p>Read more of the <a href="https://www.datatables.net/manual/options">datatable documentation</a> to get a sense of the options you can configure. You should probably only use datatables when you have long, massive tables full of information.</p>

              <div class="alert alert-info" role="alert"><i class="fa fa-info-circle"></i> <b>Note:</b>  Try to keep the columns to 3 or 4 columns only. If you add 5+ columns, your table may create horizontal scrolling with the theme. Additionally, keep the column heading titles short.</div>

            </td></tr>
        </td>
      </td></tr></tbody></table>


    <div class="tags">
        
        <b>Tags: </b>
        
        
        
        <a href="tag_formatting.html" class="btn btn-default navbar-btn cursorNorm" role="button">formatting</a>
        
        
        
    </div>

    

</div>

<hr class="shaded"/>

<footer>
            <div class="row">
                <div class="col-lg-12 footer">
               &copy;2016 . All rights reserved. <br />
<span>Page last updated:</span> July 16, 2016<br/> Site last generated: Oct 8, 2016 <br />
<!-- <p><img src="images/company_logo.png" alt="Company logo"/></p> -->
                </div>
            </div>
</footer>


    </div>
    <!-- /.row -->
</div>
<!-- /.container -->
    </div>

</body>

</html>
